<template>
    <div class="channel-container">
        <el-card class="box-card">
            <div slot="header" class="data-header">
                <el-button type="success" @click="dialogFormVisible = true">新建类型</el-button>
                <span v-if="totalCount > 0">查询出{{totalCount}}条符合条件的数据</span>
                <span v-else-if="totalCount == 0">没有满足相关条件的数据哦！</span>
            </div>
            <!-- 数据表格 -->
            <el-table
                class="data-form"
                :data="channelList"
                style="width: 100%">
                <el-table-column
                    prop="id"
                    label="id"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="type"
                    label="分类"
                    align="center">
                    <template slot-scope="scope">
                        <el-tag>{{scope.row.type}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="no"
                    label="排序"
                    align="center">
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="primary"
                            icon="el-icon-edit" circle
                            @click="handleEdit(scope.$index, scope.row)"
                        ></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 数据表格 -->
            <!-- 分页 -->
<!--            <el-pagination-->
<!--                background-->
<!--                layout="prev, pager, next, sizes, total"-->
<!--                :page-sizes="[50]"-->
<!--                :total="totalCount">-->
<!--            </el-pagination>-->
            <!-- 分页 -->
        </el-card>

        <el-dialog
            title="分类信息"
            :visible.sync="dialogFormVisible"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :append-to-body="true"
            @closed="closeDialog">
            <el-form :model="form">
                <el-form-item label="id">
                    <el-input v-model="form.id" disabled></el-input>
                </el-form-item>
                <el-form-item label="类型名称">
                    <el-input v-model="form.type"></el-input>
                </el-form-item>
                <el-form-item label="类型排序">
                    <el-input v-model="form.no" type="number"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="toAddChannel" v-if="!form.id">新 增</el-button>
                <el-button type="primary" @click="toEditChannel" v-if="form.id">保 存</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    import {addArticleChannel, getArticleChannelData, updateArticleChannel} from "../../api/article_channel";

    export default {
        name: "ArticleChannel",
        inject:['reload'],              //注入App里的reload方法
        data() {
            return {
                form: {
                    id: '',
                    type: '',
                    no: ''
                },
                channelList: [],
                totalCount: 0,
                dialogFormVisible: false
            }
        },
        created() {
            this.loadArticleChannelData()
        },
        methods: {
            loadArticleChannelData(){       // 加载所有的文章分类信息
                getArticleChannelData().then(res => {
                    this.channelList = res.data.data
                    this.totalCount = res.data.data.length
                })
            },
            toAddChannel() {        // 新增文章分类
                addArticleChannel({
                    'type': this.form.type,
                    'no': this.form.no
                }).then(res => {
                    if(res.data.code == 200){
                        this.$message({
                            message: '新增成功',
                            type: 'success'
                        })
                    }else{
                        this.$message.error(res.data.msg)
                    }
                    this.dialogFormVisible = false
                    this.reload()
                })
            },
            toEditChannel() {           // 修改文章分类
                updateArticleChannel({
                    'id': this.form.id,
                    'type': this.form.type,
                    'no': this.form.no
                }).then(res => {
                    if(res.data.code == 200){
                        this.$message({
                            message: '修改成功',
                            type: 'success'
                        })
                    }else{
                        this.$message.error(res.data.msg)
                    }
                    this.dialogFormVisible = false
                    this.reload()
                })
            },
            handleEdit(index,row) {     // 更新文章分类信息
                this.form.id = row.id
                this.form.type = row.type
                this.form.no = row.no
                this.dialogFormVisible = true
            },
            closeDialog() {
                this.form.id = ''
                this.form.type = ''
                this.form.no = ''
                this.dialogFormVisible = false
            }

        }
    }
</script>

<style scoped>

</style>
